<template>
    <div>
        <h2>房号显示列表</h2>
        <input type="button" @click="ok" value="添加房号" class="btn btn-primary" />
        <span>房号名称</span>
        <input type="text" v-model="queryInfo2.numberName"/>
        <span>创建时间</span>
        <input type="date" v-model="queryInfo2.createtime"/>
        <input type="button" @click="GetRoomNumberList" value="查询" class="btn btn-success" />
        <input type="button" @click="GetEximport" value="导出" class="btn btn-info" />
        <input type="button" @click="GetNumberDelAll" value="批量删除" class="btn btn-info" />
        <input type="button" @click="GetNumberPutAll(1)" value="批量上架" class="btn btn-primary" />
        <input type="button" @click="GetNumberPutAll(0)" value="批量下架" class="btn btn-info" />

        
        <table class="table table-bordered">
                <tbody>
                    <tr>
                        <td><input type="checkbox" v-model="checkAll" @click="gocheckAll"/></td>
                        <td>房型名称</td>
                        <td>房号</td>
                        <td>排序</td>
                        <td>备注</td>
                        <td>创建时间</td>
                        <td>状态</td>
                        <td>操作</td>
                    </tr>
                    <tr v-for="item in data2.list" :key="item.id">
                        <td><input type="checkbox" :value="item.id"  v-model="ids" @change="gocheckAllone"/></td>
                        <td>{{ item.roomTypeName}}</td>
                        <td>{{ item.numberName}}</td>
                        <td>{{ item.order}}</td>
                        <td>{{moment(item.createtime).format("YYYY-MM-DD-HH-ss")}}</td>
                        <td>{{ item.desc}}</td>
                        <td>{{ item.state==1?"上架":"下架"}}</td>
                        <td>
                            <input type="button" @click="GetNumberDel(item.id)" value="删除" class="btn btn-info" />
                            <input type="button" @click="GetNumberPut(item.id)" value="修改" class="btn btn-success" />

                        </td>
                    </tr>
                </tbody>
            </table>
    </div>
    <div>
        <span>共<a style="color: red;">{{data2.totalCount}}</a>条数据</span>
        <span>共<a style="color: red;">{{data2.totalPage}}</a>页</span>
        <span>当前<a style="color: red;">{{queryInfo2.Pageindex}}</a>/<a style="color: red;">{{queryInfo2.PageSize}}</a>页</span>
       <input type="button" value="首页" @click="gopage('a')"/>
       <input type="button" value="上一页" @click="gopage('b')"/>
       <span v-for="item in data2.totalPage" :key="item" @click="gopage(item)" >{{ item }}</span>
       <input type="button" value="下一页" @click="gopage('c')"/>
       <input type="button" value="尾页" @click="gopage('d')"/>

    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import { useRoute,useRouter } from 'vue-router';
import axios from 'axios';
import moment from 'moment';
import { it } from 'node:test';
let route=useRoute();
let router=useRouter();
let ok=()=>{
    router.push("/RoomNumberAdd")
}
//房号展示
onMounted(()=>{
    GetRoomNumberList()
})
//获取房号
let data2:any=reactive({
    list:[],
    totalCount:0,
    totalPage:0
})
//房号
let queryInfo2=reactive({
    Pageindex:1,
    PageSize:2,
    numberName:'',
    createtime:'',
    
})
//获取房号列表
const GetRoomNumberList=()=>{
    axios({
        url:'/api/RoomNumber/GetRoomNumberList',
        method:'get',
        params:queryInfo2
            
        
    })
    .then((res)=>{
        console.log(res);
        data2.list=res.data.list;
        data2.totalCount=res.data.totalCount;
        data2.totalPage=res.data.totalPage;
    })
}
//分页
const gopage=(str:any)=>{
    switch(str){
        case 'a':
            if(queryInfo2.Pageindex==1){
                alert('已经是第一页了');
                return;
            }
            queryInfo2.Pageindex=1;
        break;
        case 'b':
        if(queryInfo2.Pageindex==1){
                alert('没有上一页了');
                return;
            }
            queryInfo2.Pageindex--;   
        break;
        case 'c':
        if(queryInfo2.Pageindex==data2.totalPage){
                alert('没有下一页了');
                return;
            }
            queryInfo2.Pageindex++;   
            break;  
            case 'd':
                if(queryInfo2.Pageindex=data2.totalPage){
                    alert('没有下一页了');
                    return;
                }
                queryInfo2.Pageindex=data2.totalPage;
            break;  
            case str:
            queryInfo2.Pageindex=str;
    }
    GetRoomNumberList();
}
//选择
let ids=ref([]);
let checkAll=ref(false);
let gocheckAll=()=>{
    checkAll.value=!checkAll.value;
    if(checkAll.value){
        ids.value=data2.list.map((item:any)=>{
           return item.id;
        })
    }
    else{
        ids.value=[];
    }
}
let gocheckAllone=()=>{
    if(ids.value.length==data2.list.length){
        checkAll.value=true;
    }
    else{
        checkAll.value=false;

    }
}
//修改
const GetNumberPut=(id:any)=>{
    router.push({
        path:'/RoomNumberUpdate',
        query:{id:id}
    })
}
//导出
const GetEximport=()=>{
    location.href=`https://localhost:7289/api/RoomNumber/Eximgport?Pageindex=${queryInfo2.Pageindex}&PageSize=${queryInfo2.PageSize}`;
}
//单删
const GetNumberDel=(id:any)=>{
    var f=confirm('确认删除吗');
    if(f){
        axios({
            url:'/api/RoomNumber/RoomNumberDel',
            method:'delete',
            params:{id:id}
        })
        .then((res)=>{
        console.log(res);
        if(res.data==1){
            alert('删除成功');
            GetRoomNumberList();
            
        }
        

        else{
            alert('删除失败');
        }
        
    })
    }
}
//批量修改状态
const GetNumberPutAll=(state:any)=>{
    var f=confirm('确认修改吗');
    if(f==true){
        axios({
            url:'/api/RoomNumber/RoomNumberUptAll',
            method:'put',
            params:{
                ids:ids.value.toString(),
                state:state
            }
        })
        .then((res)=>{
        console.log(res);
        if(res.data>0){
            alert('修改成功');
            GetRoomNumberList();
        }
        else{
            alert('修改失败');
        }
        
    })
    }
}
//批量删除
const GetNumberDelAll=()=>{
    var f=confirm('确认删除吗');
    if(f==true){
        axios({
            url:'/api/RoomNumber/RoomNumberDelAll',
            method:'delete',
            params:{
                ids:ids.value.toString(),
                
            }
        })
        .then((res)=>{
        console.log(res);
        if(res.data>0){
            alert('删除成功');
            GetRoomNumberList();
        }
        else{
            alert('删除失败');
        }
        
    })
    }
}
</script>

<style scoped>
span{
    margin:0 10px;
}
input[type="button"]{
    margin:0 20px ;
}
</style>